<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><i class="el-icon-lx-calendar"></i>平台管理</el-breadcrumb-item>
        <el-breadcrumb-item>
          <router-link to="/page/platform/article_list"> <i class="el-icon-lx-calendar"></i>文章列表</router-link>
        </el-breadcrumb-item>
        <el-breadcrumb-item>文章{{articleId>0?'编辑':'添加'}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="container">
      <el-page-header @back="$router.back(-1)" :content="'文章'+(articleId>0?'编辑':'添加')" style="margin-bottom: 20px;">
      </el-page-header>
      <el-row>
        <el-col :xs="24" :sm="20" :md="20" :lg="20" :xl="20">
          <el-form ref="form" :rules="rules" :model="form" label-width="100px">
            <el-form-item label="文章标题 :" prop="title">
              <el-input v-model="form.title"></el-input>
            </el-form-item>
            <el-form-item label="副标题 :" prop="resume">
              <el-input v-model="form.resume"></el-input>
            </el-form-item>
            <el-form-item label="来源 :" prop="from">
              <el-input v-model="form.from"></el-input>
            </el-form-item>
            <el-form-item label="作者 :" prop="auth">
              <el-input v-model="form.auth"></el-input>
            </el-form-item>
            <el-form-item label="栏目 :" prop="menu_id">
              <el-cascader v-model="form.menu_id" :options="articleClass" :props="{value: 'id', label: 'label', checkStrictly: true }"></el-cascader>
            </el-form-item>
            <el-form-item label="文章Logo :" prop="image">
              <img :src="form.image" v-show="form.image" style="max-width: 150px;" />
              <upload :uploadType="'2'" :size="32" @showImg="showImg" style="width:50px;"></upload>
            </el-form-item>
             <el-form-item label="置顶 :" prop="top">
              <el-switch v-model="form.top" @change="() => {!form.top}" active-color="#13ce66" inactive-color="#ccc"></el-switch>
            </el-form-item>
            <el-form-item label="文章内容 :" prop="content">
              <!-- <editor v-if="initFlag" @getContent="getContent" :initContent="form.content"></editor> -->
              <vue-ueditor-wrap id="my-editor-wrap" v-model="form.content" :config="editorConfig"></vue-ueditor-wrap>
            </el-form-item>

            <el-form-item label="">
              <el-button :loading="ifload" type="primary" @click="saveData">{{articleId>0?'保存':'添加'}}</el-button>
            </el-form-item>

          </el-form>
        </el-col>
      </el-row>

    </div>
    <loading :ifload="ifload"></loading>
    <div class="top-down-btn">
      <el-button @click="topDown('toTop')" type="primary" icon="el-icon-caret-top" circle></el-button>
      <el-button @click="topDown('toDown')" type="primary" icon="el-icon-caret-bottom" circle></el-button>
    </div>
  </div>
</template>

<script type="text/javascript">
import loading from '@/components/utils/loading';
// import editor from '@/components/utils/editor';
import upload from '@/components/utils/upload';
import {baseUrl} from '@/components/js/request.js';
import VueUeditorWrap from 'vue-ueditor-wrap';
export default {
  components: { loading, upload, VueUeditorWrap},
  data() {
    return {
      ifload: false,
      initFlag: false, //用于富文本编辑器
      editorConfig: {
        // 访问 UEditor 静态资源的根路径，可参考 https://hc199421.gitee.io/vue-ueditor-wrap/#/faq
        UEDITOR_HOME_URL: '../static/plugins/UEditor-utf8-php/',
        // 服务端接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
        // serverUrl: baseUrl,
        initialFrameWidth: '100%',
        initialFrameHeight: '500'
      
      },
      form: {
        title: '',
        resume: '',
        image: '',
        content: '',
        menu_id: '',
        from: '',
        auth: '',
        top: false,
      },
      rules: {
        // resume: [
        //   { required: true, message: '请输入文章简述', trigger: 'blur' },
        // ],
        title: [
          { required: true, message: '请输入文章标题', trigger: 'blur' },
        ],
        menu_id: [
          { required: true, message: '请选择文章分类', trigger: 'blur' },
        ],
        content: [
          { required: true, message: '请输入文章内容', trigger: 'blur' },
        ],
      },
      articleId: 0,
      articleClass: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
    }
  },
  created() {
    this.$post_('api/frontend/list', {}, (res) => {
      if (res.code == '0') {
        console.log(res)
      } else {
        this.$message.error(res.msg);
      }
    })
    this.articleId = this.$route.query.id;
    this.$nextTick(() => {
      this.getData();
    })
  },
  mounted() {
    document.querySelector(".content-box .content").addEventListener('scroll',this.handleScroll)
  },
  methods: {
    handleScroll(){
      let wrap = document.querySelector(".content-box .content");
      let toolbar = document.querySelector(".edui-default .edui-editor-toolbarbox")
      if(wrap.scrollTop>=495){
        let width = document.querySelector(".edui-default .edui-editor").offsetWidth;
        toolbar.setAttribute('style', 'position: fixed !important;top:100px;z-index:1000;width:' + width +'px');
        document.querySelector("#my-editor-wrap").setAttribute('style','padding-top:' + toolbar.offsetHeight + 'px;');
      }else{
        
        toolbar.setAttribute('style', 'position: relative;top:auto;z-index:1000px;width:100%');
        document.querySelector("#my-editor-wrap").setAttribute('style','padding-top:0');
      }
    },
    getData() {
      this.ifload = true;
      this.$post_('setting/menu/list', {}, (res) => {
        this.articleClass = res.data;
        if (this.articleId < 1) {
          this.initFlag = true;
          this.ifload = false;
        } else {
          this.$post_('content/content/list', { id: this.articleId }, (res) => {
            if (res.code == '0') {
              console.log(res);
              this.form.title = res.data[0].title;
              this.form.resume = res.data[0].resume;
              this.form.menu_id = this.getMenuid(res.data[0].menu);
              this.form.image = res.data[0].image;
              this.form.content = res.data[0].content;
              this.form.from = res.data[0].from;
              this.form.auth = res.data[0].auth;
              this.form.top = res.data[0].top == 1 ? true : false;
              this.ifload = false;
            } else {
              this.$message.error(res.msg);
            }
            this.initFlag = true;
          })
        }

      })
    },

    //menuid 组装
    getMenuid(menu){
      let arr = []
      if(menu.parent_id>0){
        arr=[Number(menu.parent_id),Number(menu.id)]
      }else{
        arr=[Number(menu.id)]
      }
      return arr
    },

    // //获取编辑器内容
    // getContent(content) {
    //   this.form.content = content;
    // },
    //上传的图片
    showImg(imgUrl) {
      this.form.image = imgUrl;
    },
    //保存数据
    saveData() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.form.id = this.articleId;
          let data = this.form;
          //选二级的时候会返回[15,38]这样的数据
          if (data.menu_id.length>1){
            data.menu_id = data.menu_id[data.menu_id.length-1];
          } else {
            data.menu_id = data.menu_id[0];
          }
          this.form.top = this.form.top ? 1 : 0;
          this.$post_('content/content/' + (this.articleId > 0 ? 'update' : 'add'), data, (res) => {
            if (res.code == '0') {
              this.$message.success(res.msg);
              this.ifload = false;
              this.$router.back(-1);
            } else {
              this.$message.error(res.msg);
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    topDown(type){
      if(type == 'toTop'){
        document.querySelectorAll(".content-box .content")[0].scrollTop = 0;
      }else if(type == 'toDown'){
        let height = document.querySelectorAll(".content-box .content>div")[0].offsetHeight
        document.querySelectorAll(".content-box .content")[0].scrollTop = height;
      }
    }
  }
}
</script>

<style>
  .el-popper .el-radio{
    width: 100%;
    height: 100%;
    z-index: 10;
    position: absolute;
    display: flex;
    align-items: center;
  }
  .el-popper .el-radio .el-radio__input{
    top:1px;
  }
  .el-popper .el-radio+.el-cascader-node__label{
    margin-left: 10px;
  }
  .edui-default .edui-toolbar{
    line-height: normal !important;
  }
  .edui-default .edui-editor-iframeholder{
    width: auto !important;
  }
  .top-down-btn{
    display: flex;
    position: fixed;
    bottom: 10px;
    right: 30px;
    flex-direction: column;
  }
  .top-down-btn button.el-button{
    margin-left:0;
    margin-bottom:10px;
    width: 40px;
    height: 40px;
    padding: 0;
  }
</style>
